Advanced Search

Glossy Slide Menu

/ Published in: CSS
Save to your folder(s)
Glossy slide door black menu with blue hover styled which can be used on white backgrounds

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. CSS Code 
  2.  
  3. #menu_007{width:100%;}
  4. #menu_007 ul{list-style:none;}
  5. #menu_007 li{list-style:none;display:block;float:left;}
  6. #menu_007 li a{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left.jpg) no-repeat left;line-height:43px;
  7. padding:0 0 0 7px;text-decoration:none;}
  8. #menu_007 li a span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}
  9. #menu_007 li a:hover{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;height:66px;}
  10. #menu_007 li a:hover span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;color:#fff;height:66px;}
  11. #menu_007 li a.current{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;line-height:43px;padding:0 0 0 7px;text-decoration:none;}
  12. #menu_007 li a.current span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}
  13.  
  14.  
  15. HTML CODE
  16.  
  17. <div id="menu_007">
  18. 	<ul>
  19. 		<li><a href="#" class="current"><span>home</span></a></li>
  20. 		<li><a href="#"><span>about us</span></a></li>
  21.  
  22. 		<li><a href="#"><span>services</span></a></li>
  23. 		<li><a href="#"><span>solutions</span></a></li>
  24. 		<li><a href="#"><span>contact us</span></a></li>								
  25. 	</ul>
  26. </div>

URL: http://www.styledmenus.com

Report this snippet


Comments

You need to login to view comments.